<template>
  <div class="userList">
    <div class="padding_20">
      <el-input v-model="params.name"
                placeholder="请输入试纸名称"
                class="w-200"
                clearable
                @clear="handleQuery" />
      <el-button type="primary"
                 @click="handleQuery">查 询</el-button>
      <el-table :data="dataList"
                border
                v-loading="loading"
                :span-method="handleSpan"
                class="mt-20"
                style="width: 100%;">
        <el-table-column align="center"
                         prop="name"
                         label="试纸名称"></el-table-column>
        <el-table-column align="center"
                         prop="testStripTypeName"
                         label="试纸类型">
          <template slot-scope="scope">
            <span>{{scope.row.testStripFactoryDto.testStripTypeName}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         prop="factoryName"
                         label="生产厂家">
          <template slot-scope="scope">
            <span>{{scope.row.testStripFactoryDto.factoryName}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         prop="productLicenseName"
                         label="生产许可证">
          <template slot-scope="scope">
            <span>{{scope.row.testStripFactoryDto.productLicenseName}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         prop="medicalDeviceCertificateName"
                         label="注册证">
          <template slot-scope="scope">
            <span>{{scope.row.testStripFactoryDto.medicalDeviceCertificateName}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         prop="detectTypeItemName"
                         label="检测指标">
          <template slot-scope="scope">
            <span>{{scope.row.testStripFactoryDto.detectTypeItemName}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         prop="barcode"
                         label="适配仪器">
          <template slot-scope="scope">
            <span v-for="(it, index) in scope.row.testStripFactoryDto.goodsTypeDtoList"
                  :key="it.id">
              <span v-if="scope.row.testStripFactoryDto.goodsTypeDtoList.length === 1">{{it.name}}</span>
              <span v-if="scope.row.testStripFactoryDto.goodsTypeDtoList.length > 1 &&
                 index < scope.row.testStripFactoryDto.goodsTypeDtoList.length - 1 ">{{it.name}},</span>
              <span v-if="scope.row.testStripFactoryDto.goodsTypeDtoList.length > 1 && scope.row.testStripFactoryDto.goodsTypeDtoList.length - 1 === index">{{it.name}}</span>
              <!-- <span v-if="index > 0 && index < scope.row.testStripFactoryDto.goodsTypeDtoList.length">,</span> -->
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作"
                         width="180"
                         align="center">
          <template slot-scope="scope">
            <el-button type="primary"
                       @click="editRow(scope.row)">编 辑
            </el-button>
            <el-button type="danger"
                       @click="batchBtn(scope.row)">批次管理
            </el-button>
            <!-- <el-button size="mini"
                       type="text"
                       @click="deleteData(scope.row.id)">删除
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>

    <page @getList="initTableData"
          :pageTotal="totals"
          ref="page"></page>
    <el-dialog title="打印条形码"
               :visible.sync="dialogVisible"
               width="30%">
      <div id="printArea"
           style="width: 100%; text-align: center">
        <img id="barcode" />
      </div>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
        <el-button type="primary"
                   v-print="'#barcode'">打印</el-button>
      </span>
    </el-dialog>
    <addone v-if="showdialog"
            :dialogData='dialogData'
            @closedialog='showdialog=false;' />
    <batch-management v-if="isShowBatchDialog"
                      :batchDialog="batchDialog"
                      @closedialog="isShowBatchDialog=false">
    </batch-management>

  </div>
</template>

<script>
  import Page from "@/base/page/page";
  import { mapGetters } from "vuex";
  import addone from './addone'
  import batchManagement from './batchManagement'

  export default {
    name: "testPaperList",
    data () {
      return {
        loading: false,
        showdialog: false,
        dialogData: {
          show: false,
          info: {}
        },
        isShowBatchDialog: false,
        batchDialog: {
          show: false,
          object: {}
        },
        params: {},
        dialogVisible: false,
        totals: 0,
        dataList: [],
        testStripTypeList: []
      };
    },
    created () {
      this.initTableData();
      this.getDetail();
    },
    methods: {
      handleQuery() {
        this.page.pageIndex = 0
        this.initTableData()
      },
      initTableData () {
        this.loading = true;
        this.params.pageSize = this.page.pageSize;
        this.params.pageIndex = this.page.pageIndex;
        this.post(this.api.testStrip.getNewPageApp, this.params).then(res => {
          if (res.data.code === '200') {
            this.loading = false;
            this.dataList = res.data.object;
            this.totals = res.data.totalNum;
          }
        });
      },

      editRow (row) {
        this.showdialog = true
        this.dialogData = {
          show: true,
          info: row
        }
      },
      // 批次管理
      batchBtn (row) {
        if (!row.testStripFactoryDto.testStripTypeId) {
          this.isShowBatchDialog = false;
          this.$message.info('请先确认试纸类型')
        } else {
          this.isShowBatchDialog = true;
          this.batchDialog = {
            show: true,
            object: row
          }
        }
      },
      deleteData (id) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.post(this.api.cooperationHospital.testStripdeleteTestStrip, { id: id }).then(res => {
            if (res.data.code === '200') {
              this.$message.success(res.data.message)
              this.initTableData()
            } else {
              this.$message.warning(res.data.message)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        });
      },
      // 合并单元格
      handleSpan ({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (row.rowspan) {
            if (row.rowspan == -1) {
              return {
                rowspan: 0,
                colspan: 0
              };
            }
            if (row.rowspan > 1) {
              return {
                rowspan: row.rowspan,
                colspan: 1
              };
            }
          } else {
            return {
              rowspan: 1,
              colspan: 1
            };
          }
        }
      },
      // 查询详情
      getDetail () {
        this.post(this.api.cooperationHospital.getTestStripTypeList).then(res => {
          if (res.data.code === '200') {
            this.testStripTypeList = res.data.object;
          }
        });
      },
    },
    computed: {
      ...mapGetters(["page"])
    },
    components: {
      Page, addone,
      'batch-management': batchManagement // 批次管理
    }
  };
</script>

<style scoped></style>
